<template>
  <el-row>
    
   <!--  搜索操作区 -->
    <el-row class="pb10 little-header">
          <el-col  :md='18' :lg='10'  align='left'>
                  <el-input class='w-50' placeholder='请输入角色名称/创建人' v-model.trim='search.name'   @focus='focusinput($event)'  @blur = 'blurinput($event)'></el-input>
                  <el-button icon="el-icon-search" type='primary' @click='pageInit()'>搜索</el-button>
          </el-col>
          <el-col  :md='{span:3,offset:1}' :lg='{span:10,offset:3}'  align="right">  
                        <el-button  v-if="permit.add"  type="primary" icon="el-icon-plus" size="small" round     @click="handleCreate()">新增</el-button>
                       <!--  <el-button  class='export-icon'               size="small" round  v-show="permission.export" @click="handleExport()"><i class='fa fa-share pr5'></i>导出</el-button> -->
               
          </el-col>
    </el-row>
    <!-- table -->
    <el-table border  :data="tableList" style="width: 100%" >
          <el-table-column prop="name"    label="名称"    align="center"  fixed></el-table-column>
          <el-table-column prop="description"     label="描述"    align="center"></el-table-column>
          <el-table-column prop="offeiceNum"    label="相关部门" align="center"></el-table-column>
          <el-table-column prop="userNum" label="相关用户" align="center"></el-table-column>
          <el-table-column prop="modifyTime"  label="更新时间" align="center">
                  <template slot-scope="scope">
                      {{scope.row.modifyTime | formatDate}}
                  </template>
          </el-table-column>
          <el-table-column prop="createUserName"   label="创建人"   align="center"></el-table-column>
          <el-table-column label="操作"                    align="center"  width="200">
                  <template v-slot="list">
                          
                          <el-button v-if="permit.edit"   type="primary" size="mini" round @click="handleEdit(list.$index, list.row)">编辑</el-button>
                          <el-button v-if="permit.delete " type="danger"  size="mini" round @click="handleDelete(list.$index, list.row)">删除</el-button>
                  </template>
          </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class='mt28'
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[ 10, 20]"
            :page-size="10"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Total">
    </el-pagination>
    <!-- 新增/编辑弹框 -->
    <Edit ref="formEdit" :parentList="parentList" v-on:save-finished="pageInit()"></Edit>
  </el-row>
  
</template>

<script>

//接口
import { listRole , getRoleById ,removeRole,listTree } from '@/api/settings/index'
//角色新增/编辑组件
import  Edit  from '@/components/settings/charEdit'

import { mapGetters } from 'vuex'
export default {
  name: 'char',
  data () {
    return {
      /*static*/
      /*当前用户允许权限*/
      permit:{
          
          check:false,//查看详情
          delete:false,
          add:false,
          edit:false,
          //导出
          export:false,
      },

      //查询 /初始化
      search: {
        name: this.Global.ie_nine == true ? '请输入角色名称/创建人':'',/*placeholder 兼容ie9 △*/
        limit: 10,
        currentPage:1
      },
      search_place_str:'请输入角色名称/创建人',//placeholder输入内容 placeholder 兼容ie9 △
      Total:null,//表格总页数
      permission:{//表格允许操作
        add:true,
        edit:true,
        remove:true,
        export:true
      },
      tableList:[],//角色列表data
      parentList:[]
    }
  },
  created() {
    this.pageInit()
    this.getMenu() //获取创建角色时的权限树；在打开角色页面时就获取，目的是减少打开dialog时才请求，这样请求一次就好，性能优化
    this.jurisdiction()//初始化按钮权限操作
  },
  methods:{
    // 初始化表格数据
    pageInit(){
      
      let that =this
      /*placeholder 兼容ie9 △*/
      if(this.search.name == this.search_place_str){
          this.search.name = ''
      }
      listRole(this.search).then(response => {      
          if(response.data.flag == true){
              this.Total = response.data.totalRs
              this.tableList = response.data.dataList
              /*placeholder 兼容ie9 △*/
              if(this.search.name == ''){
                  this.search.name = this.Global.ie_nine == true ? this.search_place_str:''
              }
          }
      })
      .catch(error => {
          that.outputError(error)
      })
    },

    //获取创建角色时的权限树
    getMenu(){
        listTree().then(response=>{
          // console.log(response.data)
          this.parentList=response.data.dataList
        })
    },

    //初始化按钮权限操作 60200
    jurisdiction(){
        this.permit.check = this.button_limit.find(item => {
            return item.id === 60202
        })
        this.permit.add = this.button_limit.find(item => {
            return item.id === 60203 
        })
        this.permit.edit = this.button_limit.find(item => {
            return item.id === 60204 
        })
        this.permit.delete = this.button_limit.find(item => {
            return item.id === 60205
        })
        this.permit.export = this.button_limit.find(item => {
          return item.id === 60206 
        })
    },

    /*新增*/
    handleCreate(){
       this.$refs.formEdit.$emit('openAddDialog')
    },
     
    /*编辑角色
     *@param{index, row} 某一行id 某一行
    */
     handleEdit(index, row){
        
        let  geteditData;
        getRoleById(row.code).then(res=>{
            geteditData=res.data.data
           
            this.$refs.formEdit.$emit('openEditDialog',geteditData)
         })
       
        
    },

    //删除
    handleDelete(index, row) {

      let that=this
    
      this.$confirm('确定删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        

            removeRole(row.code)
            .then(response => {
                
                this.$message({type:'success',message:'删除成功'})
                this.pageInit()
            })
            .catch(error => {
                
                that.outputError(error)
            })
      })
      
      
     
    },

    //导出
    handleExport(){
        
    },

     /*placeholder 兼容ie9 focus-blur △*/
    focusinput(e){
        if(this.Global.ie_nine == true){
            this.search.name = this.search.name == this.search_place_str ? '':this.search.name
        }
    },
    blurinput(e){
        if(this.Global.ie_nine == true){
            let val = e.srcElement.value//ie9下只能用这个值
            this.search.name = val == '' ? this.search_place_str:val
        }
    },
    /*每页显示条数变化 事件触发*/
    handleSizeChange(val) {
      this.search.limit = val;
      this.pageInit()
    },
    /*页数变化 事件触发*/
    handleCurrentChange(val) {
      this.search.currentPage = val
      this.pageInit()
    },
  },
  components:{
    Edit
  },
  computed:{
    ...mapGetters(['button_limit'])
  },
}
</script>


<style scoped>
</style>
